<template>
    <!-- 顶部菜单 -->
    <div
        class="top-menus"
        v-if="topMenus.length"
        v-show="!screenRatio16_9 || (!showPageLeft && !showPageRight)"
    >
        <template v-for="item in topMenus" :key="item.code">
            <div
                v-if="!item.isHide"
                class="item"
                :style="{ backgroundImage: `url(${img3})` }"
                :class="{ active: currentPath === item.url }"
                @click="onClickTopMenu(item)"
            >
                <span class="text"> {{ item.name }}</span>
            </div>
        </template>
    </div>

    <!-- 底部菜单 -->
    <div class="bottom-menus">
        <template v-for="item in bottomShowMenus" :key="item.code">
            <div
                v-if="!item.isHide"
                class="item"
                :class="{ active: currentMenuInfo === item.code }"
                @click="onClickBottomMenu(item)"
            >
                {{ item.name }}
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { getPublicImageAssetsFile } from '@/utils/tools'
import { useRouter, useRoute } from 'vue-router'
import { shallowRef, computed, onMounted } from 'vue'
import { useGlobalStore } from '@/store/global'
const globalStore = useGlobalStore()
const screenRatio16_9 = computed(() => globalStore.screenRatio16_9)
const showPageLeft = computed(() => globalStore.showPageLeft)
const showPageRight = computed(() => globalStore.showPageRight)

// 路由
const router = useRouter()
const route = useRoute()

// 图片
const img3 = getPublicImageAssetsFile('top-menu-item-bg.png')

// 从路由配置中获取菜单数据
const transformSystemMenus = () => {
    // 获取所有路由配置
    const routes = router.options.routes

    // 过滤出主路由
    const mainRoutes = routes.filter(route => route.path !== '/')

    // 转换为菜单数据格式
    return mainRoutes.map(mainRoute => ({
        name: mainRoute.meta?.title || mainRoute.name || mainRoute.path,
        code: mainRoute.name || mainRoute.path,
        url: mainRoute.path,
        isHide: !!mainRoute.meta?.isHide,
        parentCode: '',
        subs:
            mainRoute.children?.map(childRoute => ({
                name: childRoute.meta?.title || childRoute.name || childRoute.path,
                code: childRoute.name || childRoute.path,
                url: `${mainRoute.path}/${childRoute.path}`,
                parentCode: mainRoute.name || mainRoute.path,
                isHide: !!childRoute.meta?.isHide,
                isOutlink: false,
            })) || [],
    }))
}

const allMenus = shallowRef(transformSystemMenus())

// 初始化菜单选中状态
const currentPath = computed(() => {
    if (route.meta?.activeMenu) {
        return route.meta.activeMenu
    }
    return route.path
})

// 顶部按钮 - 当前路由下的所有子路由
const topMenus = computed(() => {
    const currentPath = route.path
    const mainRoute = allMenus.value.find(menu => currentPath.startsWith(menu.url))
    if (mainRoute && mainRoute.subs && mainRoute.subs.length) {
        return mainRoute.subs
    }

    // 如果都找不到，返回第一个主菜单的子菜单
    if (allMenus.value.length > 0 && allMenus.value[0].subs) {
        return allMenus.value[0].subs
    }

    return []
})

// 点击顶部菜单
const onClickTopMenu = (info: any) => {
    router.push({
        path: info.url,
    })
}

// 当前选择的底部菜单数据
const currentMenuInfo = computed(() => {
    const menu = allMenus.value.find(item => item.subs.some(sub => sub.url === route.path))
    return menu?.code || ''
})
// 底部显示的菜单
const bottomShowMenus = computed(() => {
    return allMenus.value
})
// 点击底部菜单
const onClickBottomMenu = (info: any) => {
    router.push({
        path: info.url,
    })
}
// 点击更多菜单
const handleCommand = (command: string) => {
    if (command === 'lpstzw') {
        window.open('https://www.stzwlpxxfw.cn:32080/big-screen/#/gas/Comprehensive')
    } else {
        router.push({
            path: command,
        })
    }
}
</script>

<style lang="scss" scoped>
.top-menus {
    position: absolute;
    z-index: 3;
    height: 36px;
    left: 50%;
    transform: translateX(-50%);
    top: 121px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;

    .item {
        height: 100%;
        min-width: 116px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        background-position: 0 8px;
        cursor: pointer;

        &.active {
            .text {
                color: #fff;
                background: unset;
                background-clip: unset;
                -webkit-text-fill-color: unset;
            }
        }

        .text {
            padding-top: 2px;
            font-size: 24px;
            line-height: 24px;
            height: 24px;
            font-family: PangMenZhengDao;
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 1) 0%,
                rgba(0, 174, 246, 1) 100%
            );
            color: rgba(255, 255, 255, 1);
            background-clip: text;
            -webkit-text-fill-color: transparent;

            &:hover {
                background: linear-gradient(
                    180deg,
                    rgba(226, 226, 226, 1) 0%,
                    rgb(0, 126, 180) 100%
                );
                background-clip: text;
            }
        }
        & + .item {
            margin-left: 24px;
        }
    }
}

.bottom-menus-more-pop {
    width: 1168px;
    height: 373px;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 44px 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 24px;

    .item {
        width: 200px;
        height: 64px;
        background-repeat: no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        font-family: PangMenZhengDao;
        line-height: 28px;
        letter-spacing: 2px;
        cursor: pointer;
        user-select: none;

        &.active {
            .text {
                color: #fff;
            }
        }

        .text {
            // background: linear-gradient(
            //     180deg,
            //     rgba(255, 255, 255, 1) 0%,
            //     rgba(179, 255, 252, 1) 100%
            // );
            // color: rgba(255, 255, 255, 1);
            // background-clip: text;
            // -webkit-text-fill-color: transparent;
            color: rgba(16, 208, 160, 1);

            &:hover {
                // background: unset;
                // color: rgba(255, 255, 255, 1);
                // background-clip: unset;
                // -webkit-text-fill-color: rgba(255, 255, 255, 1);
                color: rgba(6, 194, 147, 0.8);
            }
        }
    }
}

.bottom-menus {
    position: absolute;
    width: 1200px;
    height: 44px;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    gap: 20px;

    .item {
        font-size: 28px;
        font-family: PangMenZhengDao;
        line-height: 28px;
        height: 28px;
        cursor: pointer;
        color: rgba($color: #f0f5fe, $alpha: 0.7);
        letter-spacing: 2px;
        user-select: none;

        &.active {
            color: rgba(255, 255, 255, 1);
            position: relative;
            &::after {
                content: '';
                width: 120%;
                height: 40px;
                background: url('./image-assets/bottom-menu-item-bg.png');
                background-size: 100% 100%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -6px;
                z-index: 1;
            }
        }

        &:hover {
            color: #f0f5fe;
        }
    }
}
</style>
